<template>
  <div>
    <!-- :size="data.config.size"
      :wrapper-col="{ span: data.config.labelPosition === 'top' ? 24 : 20 }"
      :labelAlign="data.config.labelPosition"
    -->
    <a-form-model
      ref="generateForm"
      :model="models"
      :rules="rules"
      label-suffix=":"
      :label-col="{ span:  data.config.labelWidth }"
      :wrapper-col="{ span: 22 - data.config.labelWidth }"
      :labelAlign="data.config.labelPosition"
    >
      <template v-for="item in data.list">
        <template v-if="item.type == 'grid'">
          <a-row
            :key="item.key"
            :gutter="item.options.gutter ? item.options.gutter : 0"
            :justify="item.options.justify"
            :align="item.options.align"
            type="flex"
          >
            <a-col v-for="(col, colIndex) in item.columns" :key="colIndex" :span="col.span">
              <template v-for="citem in col.list">
                <a-form-item v-if="citem.type == 'blank'" :label="citem.name" :prop="citem.model" :key="citem.key">
                  <slot :name="citem.model" :model="models" />
                </a-form-item>
                <genetate-form-item
                  v-else
                  :key="citem.key"
                  :models.sync="models"
                  :remote="remote"
                  :rules="rules"
                  :widget="citem"
                  @input-change="onInputChange"
                />
              </template>
            </a-col>
          </a-row>
        </template>

        <template v-else-if="item.type == 'blank'">
          <a-form-item :label="item.name" :prop="item.model" :key="item.key">
            <slot :name="item.model" :model="models" />
          </a-form-item>
        </template>

        <template v-else>
          <genetate-form-item
            :key="item.key"
            :models.sync="models"
            :rules="rules"
            :widget="item"
            :remote="remote"
            @input-change="onInputChange"
          />
        </template>
      </template>
    </a-form-model>
  </div>
</template>

<script>
  import GenetateFormItem from './GenerateFormItem'
  // import { loadJs } from '@/util/index.js'

  export default {
    name: 'FmGenerateForm',
    components: {
      GenetateFormItem,
    },
    props: ['data', 'remote', 'value', 'insite'],
    data() {
      return {
        models: {},
        rules: {},
      }
    },
    watch: {
      data: {
        deep: true,
        handler(val) {
          this.generateModle(val.list)
        },
      },
      value: {
        deep: true,
        handler(val) {
          console.log(JSON.stringify(val))
          this.models = { ...this.models, ...val }
        },
      },
    },
    created() {
      this.generateModle(this.data.list)
    },
    mounted() {},
    methods: {
      generateModle(genList) {
        for (let i = 0; i < genList.length; i++) {
          if (genList[i].type === 'grid') {
            genList[i].columns.forEach(item => {
              this.generateModle(item.list)
            })
          } else {
            if (this.value && Object.keys(this.value).indexOf(genList[i].model) >= 0) {
              this.models[genList[i].model] = this.value[genList[i].model]
            } else {
              if (genList[i].type === 'blank') {
                this.$set(
                  this.models,
                  genList[i].model,
                  genList[i].options.defaultType === 'String'
                    ? ''
                    : genList[i].options.defaultType === 'Object'
                    ? {}
                    : [],
                )
              } else {
                this.models[genList[i].model] = genList[i].options.defaultValue
              }
            }

            if (this.rules[genList[i].model]) {
              this.rules[genList[i].model] = [
                ...this.rules[genList[i].model],
                ...genList[i].rules.map(item => {
                  if (item.pattern) {
                    return { ...item, pattern: eval(item.pattern) }
                  } else {
                    return { ...item }
                  }
                }),
              ]
            } else {
              this.rules[genList[i].model] = [
                ...genList[i].rules.map(item => {
                  if (item.pattern) {
                    return { ...item, pattern: eval(item.pattern) }
                  } else {
                    return { ...item }
                  }
                }),
              ]
            }
          }
        }
      },
      getData() {
        return new Promise((resolve, reject) => {
          this.$refs.generateForm.validate(valid => {
            if (valid) {
              resolve(this.models)
            } else {
              reject(new Error(this.$t('fm.message.validError')).message)
            }
          })
        })
      },
      reset() {
        this.$refs.generateForm.resetFields()
      },
      onInputChange(value, field) {
        this.$emit('on-change', field, value, this.models)
      },
      refresh() {},
    },
  }
</script>

<style lang="less">
  // @import '../styles/cover.scss';
</style>
